<template>
  <div>
    <br/>
    <el-form v-loading="loading"
                   element-loading-text="拼命加载中" ref="form" :model="form" label-width="80px" :inline="true" :label-position="labelPosition" size="small">
      <el-form-item label="姓名">
        <el-input disabled v-model="userinfo.username"></el-input>
      </el-form-item>
      <el-form-item label="生产线">
        <el-select v-model="userinfo.flowId" disabled placeholder="请选择所在生产线">
          <el-option v-for="item in flowOpts" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <br>
      <el-form-item label="手机号码">
        <el-input v-model="userinfo.phone"></el-input>
      </el-form-item>
      <el-form-item label="是否有效">
        <el-switch v-model="userinfo.valid"></el-switch>
      </el-form-item>
      <br>
      <el-form-item label="个人爱好">
        <el-checkbox-group v-model="arrHobby">
          <el-checkbox label="读书" value="1"></el-checkbox>
          <el-checkbox label="爬山" value="2"></el-checkbox>
          <el-checkbox label="跑步" value="3"></el-checkbox>
          <el-checkbox label="篮球" value="4"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <br>
      <el-form-item label="性别">
        <el-radio-group v-model="userinfo.sex">
          <el-radio label="1" value="1">男</el-radio>
          <el-radio label="2" value="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <br>
      <el-form-item label="自我介绍">
        <el-input type="textarea" v-model="userinfo.selfinfo" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
      </el-form-item>
      <br>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import ElCol from "element-ui/packages/col/src/col";
  import * as cmsApi from '../api/cms'

  export default {
    components: {ElCol},
    data() {
      return {
        userinfo: {
          id: '',
          username: '',
          phone: '',
          flowId: '',
          valid: false,
          hobby: '',
          sex: 1,
          selfinfo: ''
        },
        labelPosition: 'right',
        flowOpts: [],
        arrHobby: [],
        loading: true
      }
    },
    methods: {
      //修改按钮
      onSubmit() {
        var temp  = this.arrHobby
        var hobby = ''
        for(var i=0;i<temp.length;i++){
          if(i == temp.length-1){
            hobby += temp[i]
          }else {
            hobby += temp[i]+','
          }
        }
        this.userinfo.hobby = hobby
        cmsApi.upadte(this.userinfo).then((res)=>{
             if(res.success == true){
               this.query()
               this.$notify({
                 title: '系统提示',
                 message: res.message,
                 type: 'success',
                 duration: 1500
               });
             }else {
               this.$notify.error({
                 title: '系统提示',
                 message: res.message,
                 duration: 1500
               });
             }
        })
      },
      query: function (val) {
        this.loading = true
        //调用服务端接口
        let params = {
          id: '1'
        }
        cmsApi.userInfo(params).then((res) => {
          if (res.success == true) {
            var arrHobby =res.object.hobby==null?[]:res.object.hobby.split(',');
            this.userinfo.id = res.object.id
            this.userinfo.username = res.object.username
            this.userinfo.flowId = res.object.flowId
            this.userinfo.phone = res.object.phone
            this.userinfo.valid = res.object.valid
            this.arrHobby = arrHobby
            this.userinfo.sex = res.object.sex
            this.userinfo.selfinfo = res.object.selfinfo
            this.loading = false
          }else {
            this.$router.push("/login");
          }
        });
      },
      flowSel: function () {
        cmsApi.flowSel().then((res) => {
          if (res.success == true) {
            this.flowOpts = res.object
          }
        })
      }
    },
    mounted() {
      //加载生产线下拉列表
      this.flowSel()
      //钩子函数
      this.query()
    }
  }
</script>
<style>


</style>
